<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
			/*
			伪类选择器        语法：任意选择器：hover【悬停】   每个伪类选择器，具备特点
			                  所有元素具备：hover【常见伪类选择器】
			
			*/
		   h1:hover{
			   background: #ffff00;
			   color: #55ffff;
		   }
		   /*
		   伪类选择器：link   链接未点击时
		              active 链接被点击时
					  visited 链接点击后状态
					  hover   悬停链接时状态
			主要结合在一起，针对a元素		  
		   */
		  a:link{/*未访问状态*/
		        color:#55ff00;
				/* 去掉超链接下划线*/
				text-decoration:none;			  
		  }
		  a:active{/*被点击状态*/
			  color:#ffaa7f;
			  background: #ff5500;
			  
		  }
		  a:visited{/*点击后状态*/
			  color: #aaffff;
			  background: #55ff00;
			  
		  }
		  a:hover{
			  font-size:55px;
			  
		  }
		  /**
		   * 伪类选择器：input:focus 获取焦点 鼠标点击输入框时效果
		   * 针对 输入框 input元素
		   */
		  input:focus{
			  background: #ff5500;
		  }
		  /*伪类选择器： frist-child 第一个儿子元素
		                last-child  最后一个儿子元素
						nth-child(n) 匹配n个儿子元素
			针对：父子集，默认父子集 table、列表			
		  */
		 li:first-child{
			 background: #55ff00;
			 color: #ff5500;
		 }
		 li:last-child{
			 background: #aaffff;
			 color: #ff5500;
		 }
		 li:nth-child(3){
			 background: #000000;
			 color: #ff5500;
		 }
		</style>
	</head>
	<body>
		<h1>鼠标悬停效果</h1>
		<a href="#">超链接</a>
		<input type="text">
		<!-- 元素之间存在父子集关系，默认存在父子关系 -->
		<ol>
			<li>唐山</li>
			<li>邢台</li>
			<li>承德</li>
			<li>保定</li>
		</ol>
	</body>
</html>